<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>switchSkin</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        #app {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            background-color: #fff;
            z-index: 99999;
            padding: 5px 20px;
        }

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
    <script src="./lib/vue.js"></script>
    <script src="./data/geojson.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <script src="../dist/inmap.js"></script>
</head>

<body>
    <div id="allmap"></div>
    <div style="position:absolute;top:0; width:100%;z-index:9999" id='app'>
        <button type="button" class="btn btn-default" @click='wiriteClick'> 白色主题</button>
        <button type="button" class="btn btn-primary" @click='blueClick'>蓝色主题 </button>
    </div>

</body>
<script>
    var inMapVue = new Vue({
        el: '#app',
        methods: {
            wiriteClick: function () {
                overlay.setOptionStyle(skin2);
            },
            blueClick: function () {
                overlay.setOptionStyle(skin1);
            }
        }
    })
    data = data.features;
    data.forEach(function (item) {
        item.count = Math.random() * 5
    });
    var map = new inMap.Map({
        id: 'allmap',
        center: ["114.16248337214269", "22.559515429553684"],
        zoom: {
            value: 11,
            show: true,
            max: 22
        }
    })

    var skin1 = {
        skin: "Blueness",
        tooltip: {
            show: true,
            offsets: {
                top: 5,
                left: 12,
            },
            formatter: function (params) {
                return `${params.name}-设备数量：${params.count}<br/>
                         ${params.name}-人口密度：${params.count}<br/>
                        `
            }
        },
        legend: {
            show: true,
            title: "板块去重设备数 "
        },

        style: {
            normal: {
                borderWidth: 0.3,
                borderColor: 'rgba(0, 0, 0, 0.2)',
                label: {
                    show: true, // 是否显示
                    font: "13px bold ",
                    color: "rgba(75,80,86,1)",
                },
            },
            mouseOver: {
                shadowColor: 'rgba(0, 0, 0, 1)',
                shadowBlur: 20,
                borderWidth: 1,
            },
            selected: {
                backgroundColor: 'rgba(184,0,0,1)',
                borderColor: "rgba(255,255,255,1)",
                label: {
                    color: "rgba(255,255,255,1)"
                }
            },
            colors: [
                "rgba(156,200,249,0.7)", "rgba(93,158,247,0.7)",
                "rgba(134,207,55,0.7)",
                "rgba(252,198,10,0.7)", "rgba(255,144,0,0.7)", "rgba(255,72,0,0.7)",
                "rgba(255,0,0,0.7)"
            ]
        },


        event: {
            onMouseClick: function (item) {
                console.log(item, 'skin1');
                //能获取当前点的信息
            }
        }
    };
    var skin2 = {
        skin: "WhiteLover",
        tooltip: {
            show: true,
          
            formatter: "{name}+'~<br/>'+{count}",
            offsets: {
                top: 5,
                left: 12,
            }
            // formatter: function (params) {
            //     return params.count;
            // }
        },
        legend: {
            show: true,
            title: "板块去重设备数 "
        },

        style: {
            normal: {
                borderWidth: 0.3,
                borderColor: 'rgba(0, 0, 0, 0.2)',
                label: {
                    show: true, // 是否显示
                    font: "13px bold ",
                    color: "rgba(75,80,86,1)",
                    selected: {
                        color: "rgba(255,255,255,1)"
                    }
                },
            },
            mouseOver: {
                shadowColor: 'rgba(0, 0, 0, 1)',
                shadowBlur: 20,
                borderWidth: 1,
            },
            selected: {
                backgroundColor: 'rgba(184,0,0,1)',
                borderColor: "rgba(255,255,255,1)"
            },
            colors: [
                "rgba(156,200,249,0.4)",
                "rgba(93,158,247,0.4)",
                "rgba(134,207,55,0.4)",
                "rgba(252,198,10,0.4)",
                "rgba(255,144,0,0.4)"
            ],

        },


        event: {
            onMouseClick: function (item) {
                console.log(item, 'skin2');
                //能获取当前点的信息
            }
        }
    };
    var overlay = new inMap.PolygonOverlay(skin1);
    map.add(overlay);
    overlay.setData(data);
</script>

</html>